<template>
  <div class="createemployee">
    <!-- 标题 -->
    <h3>创建员工信息</h3>
    <div class="box01">
      <span>员工基本信息</span>
      <span>注：带有“*”必填项</span>
    </div>
    <hr />
    <div class="box02">
      <!-- 部门 -->
      <div>
        <span>部门：</span>
        <el-select v-model="value" placeholder="select">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </div>
      <!-- 姓名 工号 岗位名称 -->
      <div v-for="item in obj" :key="item.id">
        <span>{{ item.text }} </span>
        <el-input
          v-model="item.input"
          style="width: 220px"
          :placeholder="item.pholder"
        />
      </div>
      <!-- 岗位职责 -->
      <div class="top0">
        <span>岗位职责：</span>
        <el-input
          class="left"
          style="max-width: 800px"
          v-model="textarea"
          :rows="5"
          type="textarea"
        />
      </div>
      <!-- 性别 -->
      <div>
        <span>性别：</span>
        <el-radio v-model="radio" label="selected"> 男</el-radio>
        <el-radio v-model="radio" label="selected and disabled">女</el-radio>
      </div>
      <!-- 联系方式 -->
      <div v-for="item in obj2" :key="item.id">
        <span>{{ item.text }} </span>
        <el-input
          v-model="item.input"
          style="width: 220px"
          :placeholder="item.pholder"
        />
      </div>
      <!-- 职位级别 -->
      <div>
        <span>职位级别：</span>
        <el-select v-model="obj1[3].value1" placeholder="select">
          <el-option
            v-for="item in obj1[3].options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </div>
      <!-- 职务类别 -->
      <div>
        <span>职务类别：</span>
        <el-select v-model="obj1[2].value1" placeholder="select">
          <el-option
            v-for="item in obj1[2].options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </div>
      <!-- 员工状态 -->
      <div>
        <span>员工状态：</span>
        <el-select v-model="obj1[1].value1" placeholder="select">
          <el-option
            v-for="item in obj1[1].options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </div>
      <!-- 是否 -->
      <div>
        <span>是否离职：</span>
        <el-radio v-model="radio1" label="selected"> 是</el-radio>
        <el-radio v-model="radio1" label="selected and disabled">否</el-radio>
      </div>
      <!-- 分配 -->
      <div>
        <span>分配状态：</span>
        <el-select v-model="obj1[0].value1" placeholder="select">
          <el-option
            v-for="item in obj1[0].options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </div>
      <!-- 备注 -->
      <div class="top0">
        <span>备注：</span>
        <el-input
          class="left"
          style="max-width: 800px"
          v-model="textarea1"
          :rows="5"
          type="textarea"
        />
      </div>
    </div>
    <!-- 按钮 -->
    <div class="box03">
      <el-button type="primary" @click.prevent="create" round>确认</el-button>
      <el-button type="info" round>取消</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
var router = useRouter();
let obj = ref([
  { id: 1, text: "员工姓名：", input: "", pholder: "请输入姓名" },
  { id: 2, text: "员工工号：", input: "", pholder: "请输入工号" },
  { id: 3, text: "岗位名称：", input: "", pholder: "请输入岗位名称" },
]);
let obj2 = ref([
  { id: 1, text: "工作电话：", input: "", pholder: "请输入工作电话" },
  { id: 2, text: "手机号码：", input: "", pholder: "请输入手机号码" },
  { id: 3, text: "邮箱：", input: "", pholder: "请输入邮箱" },
  { id: 4, text: "工作QQ:", input: "", pholder: "请输入工作QQ" },
  { id: 5, text: "短号：", input: "", pholder: "请输入短号" },
]);
const radio = ref("");
const radio1 = ref("");
const textarea = ref("");
const textarea1 = ref("");
const value = ref("");
const options = [
  {
    value: "总经办",
    label: "总经办",
    // 禁用
    // disabled: true,
  },
  {
    value: "业务部",
    label: "业务部",
  },
  {
    value: "资源部",
    label: "资源部",
  },
  {
    value: "研发部",
    label: "研发部",
  },
  {
    value: "制作部",
    label: "制作部",
  },
  {
    value: "人事部",
    label: "人事部",
  },
  {
    value: "阅港",
    label: "阅港",
  },
];
let obj1 = ref([
  {
    value1: "",
    options1: [
      {
        value: "未分配",
        label: "未分配",
        // 禁用
        // disabled: true,
      },
      {
        value: "已分配",
        label: "已分配",
      },
    ],
  },
  {
    value1: "",
    options1: [
      {
        value: "正常",
        label: "正常",
        // 禁用
        // disabled: true,
      },
      {
        value: "异常",
        label: "异常",
      },
    ],
  },
  {
    value1: "",
    options1: [
      {
        value: "总经理",
        label: "总经理",
        // 禁用
        // disabled: true,
      },
      {
        value: "副经理",
        label: "副经理",
      },
    ],
  },
  {
    value1: "",
    options1: [
      {
        value: "总经理",
        label: "总经理",
        // 禁用
        // disabled: true,
      },
      {
        value: "副总经理",
        label: "副总经理",
      },
      {
        value: "总监",
        label: "总监",
      },
      {
        value: "副总监",
        label: "副总监",
      },
      {
        value: "经理",
        label: "经理",
      },
    ],
  },
]);
//添加员工
var create = () => {
  // console.log(obj.value[0].input);
  axios
    .post("/api/user/created", {
      name: obj.value[0].input,
      phone: obj2.value[1].input,
    })
    .then((res) => {
      console.log("creat", res);
      //   console.log("num", value._value);
      // console.log("tableData.list", tableData.list);
      router.push("/index/home/zqq/employees/searchemployees");
    });
};
</script>

<style lang="scss" scoped>
.createemployee {
  > h3 {
    text-align: center;
    height: 100px;
    line-height: 60px;
  }
  > .box01 {
    display: flex;
    justify-content: space-between;
    span {
      font-size: 14px;
      > &:nth-child(1) {
        width: 100px;
      }
      > &:nth-child(2) {
        color: #999;
      }
    }
  }
  > .box02 {
    > div {
      width: 100%;
      min-height: 50px;
      > span {
        display: inline-block;
        width: 100px;
        text-align: right;
      }
    }
    > .top0 {
      position: relative;
      > span {
        position: absolute;
        top: 0;
      }
      > .left {
        margin-left: 100px;
      }
    }
  }
  > .box03 {
    padding: 50px 0;
    text-align: center;
  }
}
</style>